<template>
  <div class="home">
    <el-header>
      <div class="logo">
        <img src="@/assets/images/common/logo.svg" alt="" />
        <span class="name">陕煤能源数据平台</span>
      </div>
      <!-- 新增 el-select -->
      <el-select v-if="isSiteOverview" v-model="selectedValue" placeholder="请选择">
        <el-option label="电站1号" value="1"></el-option>
        <el-option label="电站2号" value="2"></el-option>
      </el-select>
      <el-popover trigger="hover" :visible-arrow="false" v-model:visible="popoverVisible">
        <template #reference>
          <div class="avatar">
            <img src="@/assets/images/common/defaultAvatar.svg" alt="" />
            <span class="userName"> {{ userName }}</span>
            <el-icon>
              <ArrowUp v-if="popoverVisible" />
              <ArrowDown v-else />
            </el-icon>
          </div>
        </template>
        <div class="logout" @click="logout" style="cursor: pointer;">退出登录</div>
      </el-popover>
    </el-header>
    <el-container>
      <el-aside>
        <MenuComponents />
      </el-aside>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </div>
</template>
<script lang="ts" setup>
import MenuComponents from '@/components/Menu.vue'
import { ref, watch } from 'vue'
import router from '@/router'
const userName = ref(localStorage.getItem('userName') || '管理员')
const logout = () => {
  localStorage.removeItem('token')
  localStorage.removeItem('userName')
  router.push('/login')
}
const popoverVisible = ref(false)

// 新增代码
const selectedValue = ref(null)
const isSiteOverview = ref(false)

watch(
  () => router.currentRoute.value.path,
  (newPath) => {
    isSiteOverview.value = newPath === '/exhibition/siteOverview/index'
  },
  { immediate: true }
)

watch(selectedValue, (newValue) => {
  if (isSiteOverview.value) {
    // 将选中的值传递给 SiteOverview 组件
    router.push({ path: '/exhibition/siteOverview/index', query: { selected: newValue } })
  }
})
</script>
<style lang="scss" scoped>
.home {
  height: 100vh;

  .el-header {
    background: #011532;
    color: #fff;
    line-height: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 24px;

    .logo {
      display: flex;
      align-items: center;

      img {
        width: 30px;
        margin-right: 13px;
      }

      .name {
        font-size: 24px;
        font-weight: 500;
      }
    }
    .el-select{
      width: 2rem;
      margin-left: 0.24rem;
    }
    .avatar {
      display: flex;
      margin-left: auto;
      cursor: pointer;
      align-items: center;

      img {
        margin-right: 8px;
        width: 32px;
      }

      .userName {
        margin-right: 8px;
        font-size: 18px;
      }

      .el-icon {
        margin-right: 24px;
      }
    }
  }

  .el-container {
    background: #011532;

    .el-aside {
      height: calc(100vh - 60px);
      width: 286px;
    }

    .el-main {
      height: calc(100vh - 60px);
      background: #F7F8FA;
      padding: 0;
      border-radius: 4px 4px 0 0;
    }
  }
}
</style>